<template>
    <div class="detail flexv" v-if="goodsInfo">
        <!-- 头部 -->
        <pubHead title="商品详情"></pubHead>

        <!-- 返回首页 -->
        <img class="back_home" @click="toHome" src="@/assets/c_returnhome.png" alt="">

        <!-- 轮播图 -->
        <div class="swipe_box" >
            <van-swipe class="swpier" :loop="true" :autoplay="3000" :show-indicators="false" @change="getIndex">
                <van-swipe-item class="swiper_item" v-for="item in goodsInfo.ticket.images" :key="item">
                    <img :src="item" alt="">
                </van-swipe-item>
            </van-swipe>
            <div class="swipe_index white tc">{{sindex}}/{{goodsInfo.ticket.images.length}}</div>
        </div>
		<div class="qianggou" v-if="limit_discount_id">
			<div class="qiang-time flex jus-b ali-c">
				<div class="qiang-time-l flex">
					<div class="l-l">限时抢购</div>
					<div class="cut-down ali-c">
						<span>距结束</span>
						<span class="time">{{times.d}}</span>
						<span>天</span>
						<span class="time">{{times.h}}</span>
						<span>:</span>
						<span class="time">{{times.m}}</span>
						<span>:</span>
						<span class="time">{{times.s}}</span>
					</div>
				</div>
				<div class="qiang-time-r">
					<div style="font-size: 0.22rem;color: #fff;">已售{{goodsInfo.ticket.sales_actual}}</div>
				</div>
			</div>
			<div class="goods_infos flexv">
			    <div class="flex top">
			        <p class="title twoline flex1">{{goodsInfo.ticket.goods_name}}</p>
					<img src="@/assets/c_share.png" @click="showShare" class="share_btn" >
				</div>
			
			    <div class="jus-b ali-b prices">
			        <div class="ali-b">
			            <span><span style="font-size: 0.3rem;">秒杀价:</span>￥{{goodsInfo.ticket.goods_price}}</span>
			            <span class="ali-b seckill_old">原价:<b>{{goodsInfo.ticket.line_price}}</b></span>
			        </div>
					<div v-if="goodsInfo.ticket.act_first_distribution_price" style="font-size: 0.24rem; color: #EE1C1A;">
						分享赚￥{{goodsInfo.ticket.act_first_distribution_price}}
					</div>
			    </div>
			</div>
		</div>
		
        <!-- 商品信息 -->
        <div class="goods_infos flexv" v-if="!limit_discount_id">
            <div class="flex top">
                <p class="title twoline flex1">{{goodsInfo.ticket.goods_name}}</p>
                <img src="@/assets/c_share.png" @click="showShare" class="share_btn" >
            </div>

            <div class="jus-b ali-b prices">
                <div class="ali-b">
                    <span>￥{{goodsInfo.ticket.goods_price}}</span>
                    <span class="ali-b seckill_old">起</span>
                    <!-- <span class="ali-b seckill_old">原价:<b>￥{{goodsInfo.ticket.}}</b></span> -->
					<div v-if="goodsInfo.ticket.first_distribution_price" style="margin-left: 0.2rem;font-size: 0.24rem; color: #EE1C1A;">
						分享赚￥{{goodsInfo.ticket.first_distribution_price}}
					</div>
				</div>
                <span class="sales">已售: {{goodsInfo.ticket.sales_actual}}</span>
            </div>
        </div>

        <!-- 地址信息 -->
        <div class="address_info flexv mt2">
            <p class="store_name">{{goodsInfo.ticket.merchant.name}}</p>
            <p class="act_time mt2">营业时间：{{goodsInfo.ticket.merchant.start_time}}-{{goodsInfo.ticket.merchant.end_time}}</p>
            <div class="jus-b fix_box ali-c">
                <span class="flex1 store_address">{{goodsInfo.ticket.merchant.address}}</span>

                <a class="right_fix flexv jus-c" :href="'https://apis.map.qq.com/tools/poimarker?type=0&marker=coord:'+goodsInfo.ticket.lat+','+goodsInfo.ticket.lng+';addr:'+goodsInfo.ticket.merchant.address+'&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp'" >
                    <img src="@/assets/c_go.png" class="go" alt="">
                    <p class="tc">去这里</p>
                </a>
            </div>
        </div>

		<!-- 门票 -->
        <!-- 门票预订 -->
        <div class="pre_order_title" v-if="goodsType==1">门票预订</div>
		<div class="pre_order_title" v-if="goodsType==2">精选房型</div>
        <div class="pre_order_title" v-if="goodsType == 3">价格类型</div>

        <!-- 门票套餐 -->
        <div class="ticket flexv" v-for="(item,index) in goodsInfo.ticket_scenic" :key="index"  v-if="goodsType==1 ">
            <p class="ticket_name">{{item.name}}</p>
            <p class="sales mt2">已售{{item.sales_actual}}</p>

            <!-- 门票信息 -->
            <div class="ticket_info flex" v-for="(ticket,ind) in item.ticket" :key="ind">
                <div class="ticket_info_left flex1 flexv">
                    <p class="twoline title">{{ticket.name}}</p>
                    <p class="spec">{{ticket.profile}}</p>

                    <div class="others flex">
                        <span class="has_sale">已售{{ticket.sales_actual}}</span>
                        <span class="need_know" @click="showNote(ticket,index)">预订须知></span>
                    </div>
                </div>

                <div class="ticket_info_right flexc flexv">
                    <div class="ali-b mt2">
                        <p class="prices ali-b">￥{{ticket.goods_price}}<span>起</span></p>
                        <span class="old">￥{{ticket.line_price}}</span>
                    </div>

                    <div class="order white tc mt2" @click="showBuy(ticket,index)">预订</div>
                </div>
            </div>
        </div>
		<!-- 酒店 -->
		<div class="ticket flexv" v-if="goodsType==2 || goodsType==3">
		    <p class="ticket_name">{{goodsInfo.ticket_scenic.name}}</p>
		    <!-- <p class="sales mt2">已售{{goodsInfo.ticket.sales_actual}}</p> -->
		
		    <!-- 门票信息 -->
		    <div class="ticket_info flex" v-for="(ticket,ind) in goodsInfo.ticket_scenic" :key="ind">
		        <div class="ticket_info_left flex1 flexv">
		            <p class="twoline title">{{ticket.name}}</p>
		            <p class="spec">{{ticket.profile}}</p>
		
		            <div class="others flex">
		                <span class="has_sale">已售{{ticket.sales_actual}}</span>
		                <span class="need_know" @click="showNote(ticket,ind)">预订须知></span>
		            </div>
		        </div>
		
		        <div class="ticket_info_right flexc flexv">
		            <div class="ali-b mt2">
		                <p class="prices ali-b">￥{{ticket.goods_price}}<span>起</span></p>
		                <span class="old">￥{{ticket.line_price}}</span>
		            </div>
		
		            <div class="order white tc mt2" @click="showBuy(ticket,ind)">预订</div>
		        </div>
		    </div>
		</div>
		<!-- 行程安排 -->
		<div class="gentuanyou" v-if="goodsType==3">
			<div class="xingchen">
				<div class="xingchen-title flex ali-c">
					<div class="title-line"></div>
					行程安排
				</div>
				<div class="xingchen-body">
					 <div class="xingchen-item" :key="index" v-for="(item,index) in goodsInfo.param">
						 <div class="item-title">
							{{item.name}}
						 </div>
						 <div class="item-body">
							{{item.more ? item.value : (item.value.slice(0,80) + '... ')}}
                            <span style="color: #ff4400" @click.stop="showMore(index)" v-if="!item.more && item.need">展开</span>
                            <span style="color: #ff4400" @click.stop="showMore(index)" v-if="item.more && item.need">收起</span>
						 </div>
					 </div>
					 
				</div>
			</div>
			<div class="fuwu">
				<div class="fuwu-title flex ali-c">
					<div class="title-line"></div>
					服务标准
				</div>
				<div class="fuwu-body" v-html="goodsInfo.ticket.fw_content">
				</div>
			</div>
			<div class="fuwu">
				<div class="fuwu-title flex ali-c">
					<div class="title-line"></div>
					旅游须知
				</div>
				<div class="fuwu-body" v-html="goodsInfo.ticket.fy_content">
				</div>
			</div>
		</div>
		
		
		<!-- <div class="test">
			<div class='time'>
				<div class='text-content'>
					
					<div class='time-line'>
						<div v-for='item in testList' :key="index" class='time-line-div'>
							<p>{{item.time}}</p>
							<p ref='circular'></p>
							<p>{{item.text}}</p>
							<p>{{item.title}}</p>
							<p>DAY</p>
						</div>
						<div class='img-dotted' ref='dotted'></div>
					</div>
					<div style='margin-top:20px;'>
					</div>
				</div>
			</div>
		</div> -->

        <!-- 商品评价 -->
        <div class="evaluates flexv mt2" v-if="goodsInfo.comment_count > 0">
            <div class="evaluate_head jus-b">
                <div class="left">精选点评（{{goodsInfo.comment_count}}条）</div>

                <div class="right ali-c" @click="toEvaluate">
                    <span>查看全部</span>
                </div>
            </div>

            <!-- 评价 -->
            <div class="evaluate flexv" v-for="(item1,index1) in goodsInfo.comment" :key="index1">
                <div class="top ali-c">
                    <img :src="item1.user_head" class="user_img" alt="">
                    <div class="rights flexv">
                        <p class="user_name">{{item1.user_name}}</p>
                        <div class="ali-b">
                            <p class="spec">{{getDate('yyyy-mm-dd',item1.add_time)}}</p>
                            <div class="star_box flex">
                                <img src="@/assets/icon_up.png" v-for="item in item1.star_num" :key="item" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 评价内容 -->
                <div class="evaluate_text mt2">{{item1.content}}</div>
                <!-- 评价图片 -->
                <div class="evaluate_imgs mt2 flex-wrap" >
                    <img :src="item2" @click="getImg(item1.images,index2)" class="img" alt="" v-for="(item2,index2) in item1.images" :key="index2">
                </div>
            </div>
        </div>

        <!-- 商品详情 -->
        <div class="articles flexv" v-if="needDetail">
            <div class="heads tc">商品详情</div>

            <div class="article" v-if="goodsInfo.ticket.content" v-html="goodsInfo.ticket.content"></div>
            <div class="article tc" v-else style="height: 2rem;font-size: 0.3rem;line-height: 2rem;">暂无详情</div>
        </div>
		<div id="empty"  v-if="needDetail"></div>
        <!-- 底部栏 -->
        <div class="footer_box">
            <div class="foot_items flex">
                <div class="flex1 flexv item" @click="toHome">
                    <img src="@/assets/c_home.png" alt="">
                    <p class="tc">首页</p>
                </div>
                <div class="flex1 flexv item" @click="soucang">
                    <img src="@/assets/c_collection_n.png" v-if="goodsInfo.is_collect == false" alt="">
                    <img src="@/assets/c_collection_s.png" v-else alt="">
                    <p class="tc" v-if="goodsInfo.is_collect == false">收藏</p>
                    <p class="tc" v-else>已收藏</p>
                </div>
                <div class="right_btn jus-c white" @click="makeCall">
                    <!-- <img src="@/assets/tel_ico.png" alt=""> -->
                    <span class="white tc">一键拨号</span>
                </div>
				<div class="right_btn jus-c white" @click="showWxCode">
				    <!-- <img src="@/assets/tel_ico.png" alt=""> -->
				    <span class="white tc">关注公众号</span>
				</div>
            </div>
        </div>

        <!-- 预订须知 -->
        <van-popup class="before_order flex" position="bottom" :close-on-click-overlay="false" v-model="showKnow">
            <div class="know_box flexv">
                <!-- 商品信息 -->
                <div class="goods_box flex" v-if="popupInfo">
                    <div class="img flex">
                        <img  :src="buyKnow.images" alt="">
                    </div>

                    <div class="infos flex1 flexv jus-a">
                        <p class="threeline title" v-if="goodsType==1">{{popupInfo.father}}</p>
                        <p class="threeline title" v-if="goodsType==3">{{popupInfo.father}}</p>
                        <p class="spec" v-if="goodsType == 1 ">{{popupInfo.name}}</p>
                        <p class="spec" v-if="goodsType == 3 ">{{popupInfo.name}}</p>
						<p class="title bold" v-if="goodsType == 2">{{popupInfo.name}}</p>
                        <span class="sales">已售{{popupInfo.sales_actual}}</span>
                    </div>

                    <img src="@/assets/close.png" @click="closeKnow" class="cancel_btn" alt="">
                </div>

                <div class="article_box flexv">
                    <div v-html="content">
						
					</div>
                </div>

                <div class="foot_btn jus-b">
                    <div class="left_note ali-b">￥{{popupInfo.goods_price}}<span>起</span></div>

                    <div class="right_btn white tc" @click="buyNow">立即预订</div>
                </div>
            </div>
        </van-popup>

        <!-- 分享弹窗 -->
        <van-popup class="share_popup flex" position="bottom" v-model="share">
            <div class="share_box jus-a ali-c">
                <div class="share_item flexv" @click="showFina">
                    <img src="@/assets/wechat.png" alt="">
                    <p class="tc">微信好友</p>
                </div>
                <div class="share_item flexv" @click="showPost">
                    <img src="@/assets/photo.png"  alt="">
                    <p class="tc">生成海报</p>
                </div>
            </div>
        </van-popup>
		<van-popup v-model="showWx">
			<div class="flexv ali-c jus-c" style="padding: 0.2rem;">
				<div style="width: 3.6rem;height: 3.6rem;">
					<img src="@/assets/wxcode.jpg" />
				</div>
				<p style="font-size: 0.24rem;">长按图片识别二维码</p>
				<p style="font-size: 0.24rem;">关注【马帮GO】公众号</p>
			</div>
			
		</van-popup>
        <!-- 规格弹窗 -->
        <van-popup v-model="showSpec" :close-on-click-overlay="false" position="bottom" class="c_popup flex">
            <div class="c_box flexv">
                <!-- 商品信息 -->
                <div class="goods_info flex">
                    <img :src="spec_img" v-for="(spec_img,indd) in selectSpecInfo.images" :key="indd" class="goods_img" alt="">

                    <div class="infos flex1 flexv jus-b">
                        <p class="title oneline">{{selectSpecInfo.father}}</p>
                        <p class="spec">{{selectSpecInfo.name}}</p>
                        <p class="price">¥{{selectSpecInfo.goods_price}}</p>
                    </div>

                    <img src="@/assets/c_close_icon.png" @click="close" class="cancel" alt="">
                </div>

                <!-- 规格 -->
                <div class="speces flexv" v-for="(item,index) in spec_list" :key="index">
                    <div class="spec_title">{{item.group_name}}</div>

                    <div class="sepc_lists flex-wrap" >
                        <div class="spec" :class="{'on': specId.indexOf(spec.item_id) != -1}"
                            v-for="(spec,ind) in item.spec_items" :key="ind"
                            @click="chooseThis(spec.item_id,item.group_id)"
                            :data-id="spec.item_id"
                        >{{spec.spec_value}}</div>
                    </div>
                </div>

                <!-- 数量 -->
                <div class="buy_nums jus-b ali-c">
                    <span>购买数量:</span>

                    <div class="nums_box flex">
                        <div class="cut tc" @click="cutNum">-</div>
                        <div class="num tc flex1">{{buyNum}}</div>
                        <div class="add tc" @click="addNum">+</div>
                    </div>
                </div>

                <!-- 购买按钮 -->
                <div class="buy_btn white tc" @click="toBuy">确定</div>


            </div>
        </van-popup>

        <!-- 最终分享弹窗 -->
        <van-popup v-model="final" class="flex finally_share_box">
            <div class="finally_share flex1 flexv">
                <div class="flex img_box">
                    <img src="@/assets/wecheat-share.png" alt="" class="fill">
                </div>
                <p class="click white tc" @click="cancel">我知道了</p>
            </div>
        </van-popup>

        <!--分享海报-->
        <van-popup v-model="shareBox" class="shareBox" id="shareBox">
            <img :src="shareSRC" alt="">
        </van-popup>
        <section class="canvas_share flexv" id="canvas-share" ref="canvasShare" v-if="!shareSRC">
            <div class="share_banner flexv">
                <img :src="shareBannerSRC" alt="" class="fill" >
                <p>{{goodsInfo.ticket.goods_name}}</p>
            </div>
			
            <div class="share_code jus-b">
				
                <div class="share_left flexv jus-a flex1">
                    <div class="share_left_top ali-c">
                        <img id="a" :src="avatar" class="share_user">
                        <p class="name flex1">{{nickname}}</p>
                    </div>

                    <div class="share_left_bottom ali-c">
                        <span class="ico white tc">抢购价</span>
                        <span class="price white tc">￥{{goodsInfo.ticket.goods_price}}</span>
                    </div>
					<div class="logo-area flex ali-b">
					    <div class="logo-img">
							<img src="@/assets/logo2.png" />
						</div>
					    <span class="logo-name">马帮GO</span>
					</div>
                </div>

                <div class="share_right flexv">
                    <img :src="codeSRC" alt="" id="b" class="code">

                    <p class="note tc white">·长按立即购买·</p>
                </div>
                
            </div>
        </section>

        <section class="canvas_sharea flexv" id="canvas-sharea" v-if="!shareSRC" ref="canvasSharea">
            <div class="share_banner flex">
                <img :src="goodsInfo.ticket.share_image" alt="" class="fill" >
            </div>
			
            <div class="share_codea jus-b">
				
                <div class="share_lefta flex flex1">
                    <div class="share_left_topa ali-c">
                        <img src="@/assets/LOGO.png" class="share_usera">
                    </div>

                    <div class="share_left_bottoma flexv flex1">
                        <div class="flexc">
                            <p>长按识别二维码立即购买</p>
                            <img src="@/assets/notice_ico.png" alt="">
                        </div>
                        <div class="tc">景区门票 | 周边游 | 吃喝玩乐购</div>
                    </div>
                </div>

                <div class="share_righta flex">
                    <img :src="codeSRC" alt="" id="b" class="codea">
                </div>
                
            </div>
        </section>

        <van-popup v-model="bindtel" class="bind_tel_box flex" >
            <div class="bind_tel flexv flexc">
                <p class="title white">绑定手机号</p>

                <div class="bind_init ali-c">
                    <span class="name">手机号</span>
                    <input type="tel" class="flex1" placeholder="请输入手机号" maxlength="11" v-model="tel">
                </div>
                <div class="bind_init ali-c">
                    <span class="name">验证码</span>
                    <input type="tel" class="flex1" placeholder="请输入验证码" maxlength="8" v-model="code">
                    <div class="get_code tc" @click="getCode">{{msg}}</div>
                </div>

                <div class="bind_btn tc" @click="bindTel">确定</div>
            </div>
        </van-popup>


    </div>
</template>

<script>
import Vue from 'vue';
import pubHead from '@/components/head';
import html2canvas from 'html2canvas';
import { u_Reg,seckill_2,timestampToDate} from '@/config/utils.js';
import wx from 'we-jssdk'; // 导入jssdk
import { Toast, Swipe, SwipeItem, Popup, Dialog,ImagePreview  } from 'vant';
import { fdetail, shareInfo, wxConfigApi, bindmobile, sendMessage, getScenicDetail,collectedit } from '@/request/api';

Vue.use(Toast,Swipe, SwipeItem, Popup)
    export default {
        data() {
            return {
				testList:[
				{title:'拉萨',key:'1',time:'01',text:'雅鹿藏布大峡谷景区】大峡谷景区是青藏高原最有神秘色彩的地区。'},
				{title:'拉萨',key:'2',time:'02',text:'雅鹿藏布大峡谷景区】大峡谷景区是青藏高原最有神秘色彩的地区，因其独特的大地构造位置，因其独特的大地构造位置因其独特的大地构造位置被科学家看做打开地球历史之门的孔锁。'},
				{title:'拉萨',key:'3',time:'03',text:'雅鹿藏布大峡谷景区】大峡谷景区是青藏高原最有神秘色彩的地区，因其独特的大地构造位置，被科学家看做打开地球历史之门的孔锁。'},
				{title:'拉萨',key:'4',time:'04',text:'雅鹿藏布大峡谷景区】大峡谷景区是青藏高原最有神秘色彩的地区，因其独特的大地构造位置，被科学家看做打开地球历史之门的孔锁。'},
				],
				limit_discount_id:null,
                hasMobile: false, // 是否绑定手机号
                once: true, // 复制重复提交
                oncea: true, // 复制重复提交
                goodsType: '', // 商品类型
                goodsId: '', // 商品id
                isNone: false, // 是否为空
                sindex: 1, // 轮播图下标
                showKnow: false, // 预订须知
                share: false, // 分享弹窗
                showSpec: false, // 规格弹窗
                buyNum: 1, // 购买数量
                selectSpecInfo: '', // 选中的规格信息
                spec_list: [], // 规格列表
                specId: '', // 选择的完整规格id
                goodsInfo: '', // 商品信息
                popupInfo: '', // 购买须知内容
                // 分享相关
                sahreInfos: '', // 分享信息
                final: false, // 是否分享到微信
                shareBox: false, // 分享弹窗
                shareSRC: null, // canvas生成的最终分海报图片
                shareLoading: false,
                shareBannerSRC: null, // 分享的海报图片
                codeSRC: null, // 分享的二维码
                bindtel: false, // 绑定手机号
                tel: '', // 手机号
                code: '', // 验证码
                msg: '获取验证码',
                timmer: '', // 计时器
				content:"",//购买须知内容
				imageLength:1, 
				avatar: '', // 用户头像
				nickname: '', // 用户昵称
				buyKnow:'',
				showWx:false,
                times:'',
                needDetail: true, // 是否需要商品详情
            }
        },
        created() {
            let user = JSON.parse(localStorage.getItem('userInfo'))
            if(user && user.mobile){
                this.hasMobile = true;
            }else{
                this.hasMobile = false;
            }
            this.goodsType = this.$route.query.type;
            // 跟团旅游不需要商品详情
            this.needDetail = this.$route.query.type == 3 ? false : true;
			this.goodsId = this.$route.query.id;
			this.limit_discount_id = this.$route.query.limit_discount_id;
			if(this.limit_discount_id){
				this.getData_1();
			}else{
				this.getData();
			}
            
            
			
        },
		mounted() {
				// this.$refs.dotted.style.left = this.$refs.circular[0].offsetLeft - 12 + 'px'
			},
        components: {
            pubHead,
            "van-swipe": Swipe,
            "van-swipe-item": SwipeItem,
            "van-popup": Popup,
        },
        beforeRouteLeave(to,from,next){
            clearInterval(this.timmer);
            next()
        },
		
        methods: {
			// 限时抢购倒计时
			cutDown_2(time) {
					this.timmer = setInterval(() => {
						if (time >= 0) {
							this.times = seckill_2(time);
							time=time-1;
						} else {
							clearInterval(this.timmer);
						}
					}, 1000)
			},
			getImg(images,index){
			      ImagePreview({
			          images:images,
			          showIndex:true,
			          loop:false,
			          startPosition:index
			    })
            },
            // 展示更多
            showMore(index){
                this.goodsInfo.param[index].more = !this.goodsInfo.param[index].more;
            },
            // 获取数据
            getData(){
                this.$loading();
                fdetail({
                    token: localStorage.getItem('token'),
                    type: this.$route.query.type,
                    id: this.$route.query.id
                }).then(res =>{
                    Toast.clear();
                    if(res.code == 1){
                        if(res.data.param && res.data.param.length > 0){
                            res.data.param.forEach((item) => {
                                if(item.value.length > 80){
                                    item.more = false;
                                    item.need = true;
                                }else{
                                    item.more = true;
                                    item.need = false;
                                }
                            });
                        }
                        this.goodsInfo = res.data;
						this.avatar = res.data.user.avatar;
						this.nickname = res.data.user.nickname;
						this.shareBannerSRC = res.data.ticket.share_image;
						this.codeSRC = res.data.logo_image;
						
						// this.getShare();
						sessionStorage.removeItem('goods_id')
                        sessionStorage.removeItem('goods_type')
                        sessionStorage.removeItem('actId')
						sessionStorage.removeItem('actType')
                        this.getSignPackage();
                    }else{
                        this.$tip(res.msg);
                    }
                })
            },
			getData_1(){
			    this.$loading();
			    fdetail({
			        token: localStorage.getItem('token'),
			        type: this.$route.query.type,
			        id: this.$route.query.id,
					activity_id:this.limit_discount_id
			    }).then(res =>{
			        Toast.clear();
			        if(res.code == 1){
			            this.goodsInfo = res.data;
						this.avatar = res.data.user.avatar;
						this.nickname = res.data.user.nickname;
						this.shareBannerSRC = res.data.ticket.share_image;
						this.codeSRC = res.data.logo_image;
						this.cutDown_2(res.data.ticket.miao)
						// this.getShare();
						sessionStorage.removeItem('goods_id')
						sessionStorage.removeItem('goods_type')
						sessionStorage.removeItem('actId')
						sessionStorage.removeItem('actType')
			            this.getSignPackage();
			        }else{
			            this.$tip(res.msg);
			        }
			    })
			},
            // 获取分享信息
			showWxCode(){
				this.showWx = true
			},
            getShare(){
				this.$loading()
                shareInfo({
                    token: localStorage.getItem('token'),
                    id: this.$route.query.id,
                    item_type: this.$route.query.type,
                }).then(res =>{
					Toast.clear()
					this.once = true;
                    if(res.code == 1){
                        this.codeSRC = res.data.logo_image;
					
                    }
                })
            },
			//转换年月日方法
			getDate(format, str) {
				let oTime = null;
				let newStr = str * 1000;
				var oDate = new Date(newStr),
					oYear = oDate.getFullYear(),
					oMonth = oDate.getMonth() + 1,
					oDay = oDate.getDate(),
					oHour = oDate.getHours(),
					oMin = oDate.getMinutes(),
					oSec = oDate.getSeconds()
				if (format == 'yyyy-mm-dd') {
					oTime = oYear + '-' + this.getzf(oMonth) + '-' + this.getzf(oDay)
				} else if (format == 'yyyy/mm/dd') {
					oTime = oYear + '/' + this.getzf(oMonth) + '/' + this.getzf(oDay)
				}
				return oTime;
			},
			//补0操作  
			getzf(num) {
				if (parseInt(num) < 10) {
					num = '0' + num;
				}
				return num;
			},
            // 获取微信签名
            getSignPackage(){
                let that = this;
                wxConfigApi({
                    url: location.href.split('#')[0]
                }).then(res =>{
                    if(res.code == 1){
                        // 返回的签名信息
                        const signPackage = res.data.sign;
                        const url = that.goodsInfo.url;
                        const title = that.goodsInfo.ticket.goods_name, img ='http://mbgo.0791jr.com'+ that.goodsInfo.ticket.share_image

                        wx.config({
                            debug: false, // 开启调试模式
                            appId: signPackage.appId, // 必填，公众号的唯一标识
                            timestamp: signPackage.timestamp, // 必填，生成签名的时间戳
                            nonceStr: signPackage.nonceStr, // 必填，生成签名的随机串
                            signature: signPackage.signature, // 必填，签名，见附录1
                            jsApiList: [
                                'onMenuShareTimeline',// 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
                                'onMenuShareAppMessage'//分享好友
                            ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                        });
                        wx.ready(() => {
                            // 分享给朋友
                            wx.onMenuShareAppMessage({
                                title: title, // 分享标题
                                link: url, // 分享链接
                                desc: title, // 副标题
                                imgUrl: img, // 分享图标
                                success () {
                                    // 用户成功分享后执行的回调函数
                                    // Toast('分享成功')
                                },
                                cancel () {
                                    // 用户取消分享后执行的回调函数
                                }
                            });
                            // 分享到朋友圈
                            wx.onMenuShareTimeline({
                                title: title, // 分享标题
                                link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                imgUrl: img, // 分享图标
                                success() {
                                },
                                cancel() {
                                }
                            });
                        });
                        wx.error(function(res){
                        });
                    }
                })
            },
            // 获取轮播图当前位置
            getIndex(info){
                this.sindex = info + 1
            },
			soucang(){
				let that = this
				this.goodsInfo.is_collect = !(this.goodsInfo.is_collect)
				collectedit({
					token: localStorage.getItem('token'),
					item_type:that.goodsType,
					id:that.goodsId
				}).then(res=>{
					if(res.code==1){
						that.$tip(res.msg)
					}
					
				})
			},
            // 返回首页
            toHome(){
                this.$router.replace('/')
            },
            // 展示预订须知
            showNote(item,index){
                this.popupInfo = item;
                this.popupInfo.father = this.goodsInfo.ticket_scenic[index].name;
                this.showKnow = true;
				getScenicDetail({
					id:item.id,
					item_type:this.goodsType
				}).then(res=>{
					this.content = res.data.content
					this.buyKnow = res.data
				})
            },
            // 关闭预订须知
            closeKnow(){
                this.showKnow = false;
            },
            // 展示分享弹窗
            showShare(){
				this.share = true
            },
            // 展示规格弹窗
            showBuy(item,index){
                if(this.hasMobile){
                    // this.showSpec = true;
                    this.selectSpecInfo = item;
                    this.selectSpecInfo.goodsType = this.$route.query.type;
                    this.selectSpecInfo.father = this.goodsInfo.ticket_scenic[index].name;
                    this.$router.push('/confirmOrder?data='+JSON.stringify(this.selectSpecInfo));
                }else{
                    this.bindtel = true;
                }
            },
            // 获取验证码
            getCode(){
                if(!this.tel){
                    this.$tip('请输入手机号!');
                    return
                }
                if(!u_Reg(this.tel,'phone')){
                    this.$tip('请输入正确的手机号!');
                    return
                }

                if(this.once){
                    this.once = false;
                    this.$loading()
                    sendMessage({
                        mobile: this.tel,
                        type: ''
                    }).then(res =>{
                        Toast.clear();
                        this.$tip(res.msg);
                        this.msg = '60S';
                        this.cutDown(60)
                    })
                }else{
                    this.$tip('验证码已发送!');
                }

            },
            // 倒计时
            cutDown(time){
                const timmer = setInterval(() =>{
                    if(time > 0){
                        time--;
                        this.msg = time+'S';
                    }else{
                        this.msg = '获取验证码';
                        this.once = true;
                        clearInterval(timmer);
                    }
                },1000)
            },
            // 绑定手机号
            bindTel(){
                if(!this.tel){
                    this.$tip('请输入手机号!');
                    return
                }
                if(!u_Reg(this.tel,'phone')){
                    this.$tip('请输入正确的手机号!');
                    return
                }
                if(!this.code){
                    this.$tip('请输入验证码!');
                    return
                }

                if(this.oncea){
                    this.oncea = false
                    this.$loading();
                    bindmobile({
                        mobile: this.tel,
                        code: this.code,
                        token: localStorage.getItem('token'),
                    }).then(res =>{
                        Toast.clear();
                        this.oncea = true;
                        this.$tip(res.msg);
                        if(res.code == 1){
                            this.bindtel = false;
                            this.hasMobile = true;
							let data = JSON.parse(localStorage.getItem('userInfo'));
							data.mobile = this.tel;
							localStorage.setItem('userInfo',JSON.stringify(data))
                        }
                    })
                }else{
                    this.$tip('您点击的太快啦T_T');
                }
            },
            // 查看全部评价
            toEvaluate(){
				let data = {
					id:this.goodsType,
					type:this.goodsId
				}
                this.$router.push({name:"Evaluates",query:data})
            },
            // 一键拨号
            makeCall(){
                Dialog.confirm({
                    title: this.goodsInfo.ticket.mobile,
                    confirmButtonColor: '#53AB2A',
                    confirmButtonText: '呼叫'
                }).then(res =>{
					 window.location.href = 'tel://'+ this.goodsInfo.ticket.mobile
                }).catch(err =>{
                })
            },
            // 立即预订
            buyNow(){
                if(this.hasMobile){
                    this.showKnow = false;
                    // this.showSpec = true;
                    this.selectSpecInfo = this.popupInfo;
                    this.selectSpecInfo.goodsType = this.$route.query.type;
                    // this.selectSpecInfo.buyNum = this.buyNum;
                    this.selectSpecInfo.goodsType = this.$route.query.type;
                    this.$router.push('/confirmOrder?data='+JSON.stringify(this.selectSpecInfo));
                }else{
                    this.bindtel = true;
                }
            },
            // 关闭弹窗
            close(){
                this.showSpec = false;
            },
            // 减
            cutNum(){
                if(this.buyNum > 1){
                    this.buyNum--
                }else{
                    this.$tip('不能再减了哦T_T');
                }
            },
            // 加
            addNum(){
                this.buyNum ++
            },
            // 去购买
            toBuy(){
                this.selectSpecInfo.buyNum = this.buyNum;
                this.selectSpecInfo.goodsType = this.$route.query.type;
                this.$router.push('/confirmOrder?data='+JSON.stringify(this.selectSpecInfo));
            },
            // 展示分享到微信
            showFina(){
                this.share = false;
                this.final = true;
            },
            // 关闭提示
            cancel(){
                this.final = false;
            },
            // 关闭分享弹出回调
            closeShareBox() {
				this.shareBox = false;
                // this.shareSRC = '';
            },
			showPost(){
				this.share = false;
				
				if(this.shareSRC!=null)
				{
					this.shareBox = true;
				}else{
					this.shareBanner('click')
				}
			},
            // 获取海报
            shareBanner(type) {
                this.share = false;
				
					
				if (type == "click") {
					this.$loading("加载中...");
				}

                // 正常进入
                var opts = {
					backgroundColor: null,
					timeout: 50, // 加载延时
                    useCORS:true
                };
				
				
				let that = this
                const timmer = setTimeout(() =>{
                    if(this.goodsInfo.ticket.template_id == 1){
                        html2canvas(document.getElementById('canvas-share'),opts).then((canvas) => {
                                that.shareSRC = canvas.toDataURL("image/png");
                            that.shareBannerSRC = null;
                            clearInterval(timmer);
                            that.shareBox = true;
                            console.log('load banner end');
                            
                            if (type == "click") {
                                Toast.clear();
                            }
                            
                        });
                    }else if(this.goodsInfo.ticket.template_id == 2){
                        html2canvas(document.getElementById('canvas-sharea'),opts).then((canvas) => {
                                that.shareSRC = canvas.toDataURL("image/png");
                            that.shareBannerSRC = null;
                            clearInterval(timmer);
                            that.shareBox = true;
                            console.log('load banner end');
                            
                            if (type == "click") {
                                Toast.clear();
                            }
                            
                        });
                    }else{
                        html2canvas(document.getElementById('canvas-shareb'),opts).then((canvas) => {
                                that.shareSRC = canvas.toDataURL("image/png");
                            that.shareBannerSRC = null;
                            clearInterval(timmer);
                            that.shareBox = true;
                            console.log('load banner end');
                            
                            if (type == "click") {
                                Toast.clear();
                            }
                            
                        });
                    }
                }, 0)
            },
			
        }
    }
</script>

<style lang="less" scoped>
.detail{
    min-height: 100vh;
    background-color: #f5f5f5;
    // 返回首页
    .back_home{
        width: 0.62rem;
        height: 0.62rem;
        position: fixed;
        z-index: 100;
        top: 1.24rem;
        right: 0.3rem;
        border-radius: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        img{
            width: 0.44rem;
            height: 0.44rem;
            margin: auto;
        }
    }
    // 轮播图
    .swipe_box{
        width: 100%;
        max-width: 750px;
        margin: 0 auto;
        height: 7.5rem;
        position: relative;
        .swiper_item{
            height: 7.5rem;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .swipe_index{
            width: 0.8rem;
            height: 0.4rem;
            position: absolute;
            z-index: 1;
            bottom: 0.3rem;
            right: 0.3rem;
            border-radius: 0.2rem;
            font-size: 0.22rem;
            line-height: 0.4rem;
            background-color: rgba(0,0,0,0.4);
        }
    }
    .qianggou{
    	.qiang-time{
    		color: #fff;
    		padding: 0.3rem 0.2rem;
    		background:linear-gradient(0deg,rgba(101,197,50,1) 0%,rgba(80,173,34,1) 100%);
    		.qiang-time-l{
    			.l-l{
    				font-size: 0.34rem;
    				padding-right: 0.1rem;
    				border-right: 0.01rem solid #fff;
    			}
    			.cut-down {
    				margin-left: 0.24rem;
    				font-size: 0.24rem;
    				line-height: 120%;
    				color: #fff;
    			
    				.time {
    					margin: 0 0.06rem;
    					padding: 0.04rem;
    					border-radius: 0.04rem;
    					font-size: 0.22rem;
    					color: #EE1C1A;
    					background-color: #fff;
    				}
    			}
    		}
    	}
    }
	// 商品信息
    .goods_infos{
        padding:0 0.3rem 0.3rem;
        background-color: #fff;
        .top{
            margin-top: 0.3rem;
            .title{
                font-size: .3rem;
                line-height: 150%;
                color: #333;
            }
            .share_btn{
                width: 0.4rem;
                height: 0.4rem;
                margin: 0 0 auto 0.3rem;
            }
        }
        .prices{
            margin-top: 0.3rem;
            span{
                font-size: 0.52rem;
                line-height: 120%;
                color: #FF4400;
            }
            .sales{
                font-size: 0.2rem;
                line-height: 120%;
                color: #999;
            }
            .seckill_old{
                margin-left: 0.1rem;
                font-size: 0.22rem;
                line-height: 120%;
                color: #999;
                b{
                    font-weight: normal;
                    text-decoration: line-through;
                }
            }
        }
    }
    // 地址信息
    .address_info{
        padding: 0.3rem;
        background-color: #fff;
        .store_name{
            font-size: 0.24rem;
            line-height: 120%;
            font-weight: bold;
            color: #111;
        }
        .act_time{
            font-size: 0.26rem;
            line-height: 120%;
            color: #4e4e4e;
        }
        .fix_box{
            .store_address{
                font-size: 0.26rem;
                line-height: 120%;
                color: #4e4e4e;
            }
            .right_fix{
                margin-left: 0.3rem;
                .go{
                    width: 0.34rem;
                    height: 0.34rem;
                    margin: 0 auto;
                }
                p{
                    margin-top: 0.1rem;
                    font-size: 0.22rem;
                    line-height: 120%;
                    color: #EE1C1A;
                }
            }
        }
    }
    // 门票预订
    .pre_order_title{
        height: 0.94rem;
        padding: 0 0.3rem;
        font-size: 0.36rem;
        line-height: 0.94rem;
        font-weight: bold;
        color: #212121;
    }
    // 门票
    .ticket{
        padding: 0.26rem 0.3rem 0.3rem;
        background-color: #fff;
		&+.ticket{
			margin-top: 0.2rem;
		}
		// &:nth-of-type(n+2){
		// 	margin-top: 0.2rem;
		// }
        .ticket_name{
            font-size: 0.3rem;
            line-height: 120%;
            font-weight: bold;
            color: #212121;
        }
        .sales{
            height: 0.32rem;
            margin-right: auto;
            padding: 0 0.14rem;
            border-radius: 0.04rem;
            font-size: 0.24rem;
            line-height: 0.32rem;
            color: #575757;
            background-color: #eee;
        }
        .ticket_info{
			margin-top: 0.28rem;
            padding: 0.3rem 0.24rem;
            border-radius: 0.1rem;
            background-color: #f5f5f5;
            .ticket_info_left{
                .title{
                    font-size: 0.3rem;
                    line-height: 150%;
                    color: #212121;
                }
                .spec{
                    margin-top: 0.12rem;
                    font-size: 0.24rem;
                    line-height: 120%;
                    color: #999;
                }
                .others{
                    height: 0.3rem;
                    margin-top: 0.4rem;
                    font-size: 0.24rem;
                    line-height: 0.3rem;
                    .has_sale{
                        padding-right: 0.12rem;
                        border-right: 1px solid #979796;
                        color: #979796;
                    }
                    .need_know{
                        margin-left: 0.1rem;
                        color: #EE1C1A;
                    }
                }
            }
            .ticket_info_right{
                width: 38%;
                margin-left: 0.2rem;
                .prices{
                    color: #EE1C1A;
                    font-size: 0.34rem;
                    line-height: 120%;
                    span{
                        font-size: 0.24rem;
                        line-height: 120%;
                        color: #979796;
                    }
                }
                .old{
                    margin-left: 0.14rem;
                    font-size: 0.24rem;
                    line-height: 120%;
                    color: #979796;
                    text-decoration: line-through;
                }
                .order{
                    width: 1.38rem;
                    height: 0.56rem;
                    border-radius: 0.28rem;
                    font-size: 0.28rem;
                    line-height: 0.56rem;
                    background:linear-gradient(252deg,rgba(83,171,42,1) 0%,rgba(120,206,80,1) 100%);
                }
            }
        }
    }
    .gentuanyou{
		// 行程安排
		.xingchen{
			.xingchen-title{
				padding: 0.2rem 0;
				font-size: 0.32rem;
				color: #fff;
				background-color: #5Db334;
				.title-line{
					width: 0.07rem;
					height: 0.3rem;
					background-color: #fff;
					border-radius: 0.14rem;
					margin-right: 0.2rem;
				}
			}
			.xingchen-body{
				padding:0.05rem 0.2rem 0.3rem 0.2rem;
				background-color: #fff;
				.xingchen-item{
					margin-top: 0.2rem;
					.item-title{
						font-size: 0.32rem;
						margin-bottom: 0.2rem;
					}
					.item-body{
						margin-top: 0.2rem;
						font-size: 0.3rem;
						padding: 0.2rem;
						background-color: #fffae7;
					}
				}
			}
		}
		.fuwu{
			.fuwu-title{
				padding: 0.2rem 0;
				font-size: 0.32rem;
				color: #fff;
				background-color: #5Db334;
				.title-line{
					width: 0.07rem;
					height: 0.3rem;
					background-color: #fff;
					border-radius: 0.14rem;
					margin-right: 0.2rem;
				}
			}
			.fuwu-body{
				padding: 0.4rem 0.5rem;
				background-color: #fff;
				font-size: 0.3rem;
			}
		}
		
	}
	// .test{
	// 	background-color: #fff;
	// 	.text-center{
	// 		text-align: center;
	// 	}
	// 	.time h2{
	// 		color:#FF6600;
	// 		margin: 20px auto 30px auto;
	// 	}
	// 	.time-line{
	// 		position: relative;
	// 		width:6rem;
	// 		margin:0 auto;
	// 	}
	// 	.time-line-div{
	// 		position:relative;
	// 		min-height:2.6rem;
	// 	}
	// 	.time-line-div>p:nth-child(1){
	// 		position: absolute;
	// 		left:0;
	// 		top: 0rem;
	// 		width:1rem;
	// 		font-size: 0.5rem;
	// 	}
	// 	.time-line-div>p:nth-child(2){
	// 		position:absolute;
	// 		left: 1.1rem;
	// 		width:0.3rem;
	// 		height:0.3rem;
	// 		top:0.2rem;
	// 		background:#dbdbdb;
	// 		border-radius: 50%;
	// 		z-index: 10
	// 	}
	// 	.time-line-div>p:nth-child(3){
	// 		position:absolute;
	// 		top: 0.75rem;
	// 		left: 1.7rem;
	// 		padding: 0.2rem;
	// 		background: #fffae7;
	// 		font-size:.26rem;
	// 		border-radius: 0.2rem;
	// 		display: -webkit-box;
	// 		-webkit-box-orient: vertical;
	// 		-webkit-line-clamp: 4;
	// 		overflow: hidden;
	// 		max-height: 1.9rem;
	// 		border-bottom: 0.2rem solid #fffae7;
	// 	}
	// 	.time-line-div>p:nth-child(4){
	// 		position:absolute;
	// 		top: 0.1rem;
	// 		left: 1.7rem;
	// 		font-size:.36rem;
	// 		border-radius: 0.2rem;
	// 	}
	// 	.time-line-div>p:nth-child(5){
	// 		position:absolute;
	// 		top: 0.6rem;
	// 		font-size:.32rem;
	// 		border-radius: 0.2rem;
	// 		color: #dbdbdb;
	// 	}
	// 	.img-dotted{
	// 		position:absolute;
	// 		width:0.4rem;
	// 		height:97%;
	// 		top:0.2rem;
	// 		left: 0.87rem;
	// 		z-index: 1;
	// 		background:url('../../assets/dotted.png');
	// 	}
	// }
	// 商品评价
    .evaluates{
        padding: 0 0.3rem;
        background-color: #fff;
        .evaluate_head{
            height: 0.8rem;
            border-bottom: 0.01rem solid #ededed;
            font-size: 0.36rem;
            font-weight: bold;
            line-height: 0.8rem;
            color: #212121;
            .right{
                font-size: 0.2rem;
                color: #666;
                span{
                    padding-right: 0.24rem;
                    background: url('~@/assets/c_rightarrow.png') no-repeat right center;
                    background-size: 0.12rem 0.22rem;
                }
            }
        }
        // 评价
        .evaluate{
            padding: 0.2rem 0;
            .top{
                .user_img{
                    width: 0.5rem;
                    height: 0.5rem;
                    margin: 0 0 auto;
                    border-radius: 100%;
                    overflow: hidden;
                }
                .rights{
                    margin-left: 0.2rem;
                    .user_name{
                        font-size: 0.26rem;
                        line-height: 120%;
                        color: #333;
                    }
                    .spec{
                        margin-top: 0.1rem;
                        font-size: 0.2rem;
                        line-height: 120%;
                        color: #b2b2b2;
                    }
                    .star_box{
                        margin-left: 0.2rem;
                        img{
                            width: 0.2rem;
                            height: 0.2rem;
                            margin: 0 0.02rem;
                        }
                    }
                }
            }
            .evaluate_text{
                margin-left: 0.56rem;
                font-size: 0.24rem;
                line-height: 150%;
                color: #333;
            }
            .evaluate_imgs{
                margin-left: 0.56rem;
                .img{
                    width: 2rem;
                    height: 2rem;
                    margin: 0.16rem 0.14rem 0 0;
                    border-radius: 0.1rem;
                }
                .img:nth-child(3n){
                    margin-right: 0;
                }
            }
        }
    }
    // 商品详情
    .articles{
        .heads{
            font-size: 0.26rem;
            line-height: 0.8rem;
            color: #333;
            height: 0.8rem;
            position: relative;
        }
        .heads::before,.heads::after{
            content: "";
            width: 0.78rem;
            height: 0.02rem;
            margin: auto 0;
            position: absolute;
            z-index: 1;
            top: 0;
            bottom: 0;
            background-color: #dedede;
        }
        .heads::before{
            left: 30%;
        }
        .heads::after{
            left: 60%;
        }
        .article{
            padding: 0.2rem;
            background-color: #fff;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    // 底部栏
    .footer_box{
        width: 100%;
        height: 1rem;
        .foot_items{
            width: 100%;
            max-width: 750px;
            height: 1rem;
            margin: 0 auto;
            padding-right: 0.28rem;
            position: fixed;
            z-index: 100;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #fff;
            box-shadow:0px -1px 10px 0px rgba(188,184,184,0.49);
            .item{
                img{
                    max-width: 0.4rem;
                    max-height: 0.38rem;
                    margin: 0.14rem auto 0;
                }
                p{
                    margin-top: 0.1rem;
                    font-size: 0.22rem;
                    line-height: 120%;
                    color: #666;
                }
            }
            .right_btn{
                width: 2.4rem;
                height: 0.64rem;
                margin: auto 0 auto 0.2rem;
                border-radius: 0.32rem;
                font-size: 0.28rem;
                line-height: 0.64rem;
                background:linear-gradient(252deg,rgba(83,171,42,1) 0%,rgba(120,206,80,1) 100%);
                img{
                    width: 0.24rem;
                    height: 0.24rem;
                    margin: auto 0;
                }
                span{
                    margin-left: 0.12rem;
                }
            }
        }
    }
    // 预订须知
    .before_order{
        width: 100%;
        max-height: 80vh;
        border-radius: 0.36rem 0.36rem 0 0;
        .know_box{
            width: 100%;
            padding: 0.6rem 0 0;
            background-color: #fff;
            position: relative;
            // 商品信息
            .goods_box{
                padding: 0 0.3rem;
                .img{
                    width: 1.8rem;
                    height: 1.8rem;
                    border-radius: 0.1rem;
                    border: 1px solid #f5f5f5;
                    overflow: hidden;
                    img{
                        margin: auto;
                    }
                }
                .infos{
                    margin-left: 0.28rem;
                    .title{
                        font-size: 0.3rem;
                        line-height: 150%;
                        font-weight: bold;
                        color: #212121;
                    }
                    .spec{
                        font-size: 0.22rem;
                        line-height: 120%;
                        color: #999;
                    }
                    .sales{
                        margin-right: auto;
                        font-size: 0.24rem;
                        line-height: 120%;
                        color: #575757;
                    }
                }
                .cancel_btn{
                    width: 0.26rem;
                    height: 0.26rem;
                    margin-left: 0.52rem;
                }
            }
            .article_box{
                height: 72%;
                padding:0.3rem;
                overflow: scroll;
                // 预订须知
                .know_head{
                    height: 0.4rem;
                    margin-top: 0.6rem;
                    padding-left: 0.2rem;
                    border-left: 0.06rem solid #53AB2A;
                    font-size: 0.32rem;
                    line-height: 0.4rem;
                    font-weight: bold;
                    color: #333;
                }
                .know_list{
                    margin-top: 0.4rem;
                    .left{
                        width: 1.24rem;
                        height: 0.36rem;
                        margin-bottom: auto;
                        border-radius: 0.04rem;
                        font-size: 0.22rem;
                        line-height: 0.36rem;
                        font-weight: bold;
                        color: #F1600A;
                        background-color: #FCF1E9;
                    }
                    .right{
                        margin-left: 0.16rem;
                        font-size: 0.26rem;
                        line-height: 150%;
                        color: #333;
                    }
                }
                .bottom_space{
                    height: 0.4rem;
                }
            }
            // 底部按钮
            .foot_btn{
                width: 100%;
                height: 1rem;
                padding: 0.2rem 0.3rem 0.2rem 0.46rem;
                box-shadow:0px -1px 10px 0px rgba(188,184,184,0.49);
                .left_note{
                    margin: auto 0;
                    font-size: 0.44rem;
                    line-height: 120%;
                    color: #EE1C1A;
                    span{
                        font-size: 0.24rem;
                        line-height: 120%;
                        color: #979796;
                    }
                }
                .right_btn{
                    width: 4.4rem;
                    height: 0.64rem;
                    margin: auto 0;
                    font-size: 0.28rem;
                    line-height: 0.64rem;
                    background: linear-gradient(252deg,rgba(83,171,42,1) 0%,rgba(120,206,80,1) 100%);
                    border-radius: 0.32rem;
                }
            }
        }
    }
    // 分享弹窗
    .share_popup{
        width: 100%;
        height: 2.54rem;
        border-radius: 0.16rem 0.16rem 0 0;
        overflow: hidden;
        .share_box{
            width: 100%;
            background-color: #fff;
            .share_item{
                img{
                    width: 1.1rem;
                    height: 1.1rem;
                    margin: 0 auto;
                    border-radius: 100%;
                }
                p{
                    margin-top: 0.3rem;
                    font-size: 0.3rem;
                    line-height: 120%;
                    color: #999;
                }
            }
        }
    }
    // 规格弹窗
    .c_popup{
        max-height: 10.18rem;
        border-radius: 0.14rem 0.14rem 0 0;
        background-color: #fff;
        .c_box{
            width: 100%;
            overflow-y: scroll;
            .top{
                height: 1.16rem;
                font-size: 0.36rem;
                line-height: 1.16rem;
                font-weight: bold;
                color: #333;
                position: relative;
                .cancel{
                    width: 0.42rem;
                    height: 0.42rem;
                    margin: auto 0;
                    position: absolute;
                    z-index: 1;
                    top: 0;
                    right: 0.3rem;
                    bottom: 0;
                    background-color: #fff;
                }
            }
            // 规格弹窗
            .goods_info{
                padding: 0.3rem;
                border-bottom: 0.01rem solid #ededed;
                .goods_img{
                    width: 1.6rem;
                    height: 1.6rem;
                    border-radius: 0.1rem;
                }
                .infos{
                    margin-left: 0.3rem;
                    .title{
                        font-size: 0.28rem;
                        line-height: 120%;
                        color: #333;
                    }
                    .price{
                        font-size: 0.3rem;
                        line-height: 120%;
                        color: #ff4400;
                    }
                    .spec{
                        font-size: 0.22rem;
                        line-height: 120%;
                        color: #999;
                    }
                }
                .cancel{
                    width: 0.42rem;
                    height: 0.42rem;
                    margin-left: 0.2rem;
                }
            }

            // 规格
            .speces{
                padding: 0.3rem;
                border-bottom: 0.01rem solid #ededed;
                .spec_title{
                    font-size: 0.26rem;
                    line-height: 120%;
                    color: #333;
                }
                .sepc_lists{
                    .spec{
                        height: 0.4rem;
                        margin: 0.3rem 0.3rem 0 0;
                        padding: 0 0.2rem;
                        border: 0.01rem solid #c0c0c0;
                        border-radius: 0.1rem;
                        font-size: 0.24rem;
                        line-height: 0.38rem;
                        color: #666;
                    }
                    .on{
                        border-color: #FEA382;
                        color: #FEA382;
                    }
                }
            }

            // 购买数量
            .buy_nums{
                padding: 0.3rem;
                font-size: 0.26rem;
                line-height: 120%;
                color: #333;
                border-bottom: 0.01rem solid #ededed;
                .nums_box{
                    width: 2.04rem;
                    height: 0.5rem;
                    border: 0.01rem solid #dadada;
                    border-radius: 0.1rem;
                    .cut,.add{
                        width: 0.6rem;
                        font-size: 0.4rem;
                        line-height: 0.48rem;
                        color: #bebebe;
                    }
                    .num{
                        border-left: 0.01rem solid #dadada;
                        border-right: 0.01rem solid #dadada;
                        font-size: 0.3rem;
                        line-height: 0.48rem;
                        color: #333;
                    }
                }
            }

            // 确定按钮
            .buy_btn{
                height: 0.98rem;
                margin-top: 0.12rem;
                font-size: 0.3rem;
                line-height: 0.98rem;
                background-color: #53AB2A;
            }
        }
    }
    /* 分享海报 */
    .shareBox {
        width: 6.4rem;
        // max-height: 11rem;
        margin: auto;
        z-index: 1000;
        img {
            width: 6.8rem;
            height: 100%;
        }
        /deep/ .van-swipe__indicator--active {
            background: #ff5800;
        }
        /deep/ .van-popup {
            position: fixed;
            background-color: rgba(0,0,0,0.06);
            top: 0;
            left: 50%;
            bottom: 0;
            transform: translate3d(-50%,0,0);
            transition: .2s ease-out;
        }
    }
    .canvas_share {
        width: 5.6rem;
        max-height: 10rem;
        padding: 0.3rem 0.3rem;
        // margin: auto;
        position: fixed;
        z-index: 1;
        left: -500%;
        bottom: -500%;
        overflow: hidden;
        background-color: #56A934;
        .share_banner{
            width: 5rem;
            min-height: 6rem;
            padding: 0.2rem;
            border-radius: 0.1rem;
            overflow: hidden;
            background-color: #fff;
            img{
                width: 4.6rem;
                height: 4.6rem;
            }
            p{
                margin-top: 0.14rem;
                font-size: 0.28rem;
                line-height: 150%;
                color: #333;
            }
        }
        .share-logo-top{
            width: 1.2rem;
            height: 1.2rem;
            position: absolute;
            z-index: 1;
            top: 0.2rem;
            left: 0.2rem;
            background-color: #fff;
            border-radius: 100%;
            overflow: hidden;
        }
        .share_code {
            margin-top: 0.3rem;
            padding: 0.3rem 0.2rem;
            border-radius: 0.1rem;
            background-color: #fff;
            overflow: hidden;
            .share_left{
                .share_left_top{
                    .share_user{
                        width: 0.8rem;
                        height: 0.8rem;
                        border-radius: 100%;
                        overflow: hidden;
                    }
                    .name{
                        margin-left: 0.2rem;
                        font-size: 0.26rem;
                        line-height: 120%;
                        color: #333;
						overflow: hidden;
                    }
                }
                .share_left_bottom{
                    .ico{
                        width: 1rem;
                        height: 0.4rem;
                        font-size: 0.2rem;
                        line-height: 0.4rem;
                        background: url('~@/assets/arrow_bg.png') no-repeat center;
                        background-size: 100% 100%;
                    }
                    .price{
                        margin-left: 0.14rem;
                        font-size: 0.32rem;
                        line-height: 120%;
                        color: #EB2126;
                    }
                }
				.logo-area{
					.logo-img{
						width: 0.3rem;
						height: 0.3rem;
						img{
							width: 100%;
							height: 100%;
						}
					}
					.logo-name{
						font-size: .2rem;
						margin-left: .1rem;
					}
				}
            }
            .share_right{
				width: 1.8rem;
                .code{
                    width: 1.6rem;
                    height: 1.6rem;
                    margin: 0 auto;
                }
                .note{
                    height: 0.32rem;
                    margin: 0.12rem auto 0;
                    padding: 0 0.1rem;
                    font-size: 0.2rem;
                    line-height: 0.32rem;
                    border-radius: 0.18rem;
                    background-color: #56A934;
                }
            }
        }
    }
    .canvas_sharea {
        width: 100%;
        max-width: 750px;
        height: 13.36rem;
        margin: 0 auto;
        position: fixed;
        z-index: 200;
        left: -500%;
        bottom: -500%;
        overflow: hidden;
        background-color: #fff;
        .share_banner{
            width: 100%;
            height: 11.54rem;
            overflow: hidden;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .share_codea {
            width: 100%;
            height: 1.82rem;
            padding: 0.2rem;
            background-color: #fff;
            overflow: hidden;
            .share_lefta{
                .share_left_topa{
                    width: 1.32rem;
                    height: 1.4rem;
                    margin: auto 0;
                    overflow: hidden;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .share_left_bottoma{
                    margin: auto 0;
                    font-size: 0.24rem;
                    line-height: 0.4rem;
                    color: #333;
                    img{
                        width: 0.66rem;
                        height: 0.24rem;
                        margin: auto 0 auto 0.1rem;
                    }
                }
            }
            .share_righta{
                width: 1.4rem;
                height: 1.4rem;
                margin: auto 0;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    // 绑定手机号弹窗
    .bind_tel_box{
        width: 100%;
        background-color: transparent;
        .bind_tel{
            width: 80%;
            margin: auto;
            padding: 0.6rem 0.3rem;
            border-radius: 0.2rem;
            background-color: #53AB2A;
            .title{
                font-size: 0.36rem;
                line-height: 120%;
            }
            .bind_init{
                width: 100%;
                height: 0.8rem;
                margin-top: 0.3rem;
                padding: 0 0.3rem;
                border-radius: 0.4rem;
                background-color: #fff;
                overflow: hidden;
                .name{
                    width: 1.12rem;
                    font-size: 0.28rem;
                    line-height: 120%;
                    color: #333;
                }
                input{
                    width: 2rem;
                    height: 0.6rem;
                    margin: auto 0;
                    font-size: 0.28rem;
                    line-height: 0.6rem;
                    color: #333;
                    background-color: transparent;
                }
                .get_code{
                    width: 2rem;
                    height: 0.5rem;
                    margin: auto 0;
                    border-radius: 0.3rem;
                    font-size: 0.26rem;
                    line-height: 0.5rem;
                    color: #fff;
                    background-color: #53AB2A;
                }
            }
            .bind_btn{
                width: 100%;
                height: 0.8rem;
                margin-top: 0.64rem;
                font-size: 0.32rem;
                line-height: 0.8rem;
                color: #333;
                border-radius: 0.4rem;
                background-color: #fff;
            }
        }
    }
	
	.finally_share_box{
	    width: 100%;
	    background-color: rgba(0, 0, 0, 0.2);
	    .finally_share{
	        width: 100%;
	        max-width: 750px;
	        height: 100vh;
	        margin: 0 auto;
	        .img_box{
	            width: 5.64rem;
	            height: 3.9rem;
	            margin: 0 0.4rem 0 auto;
	        }
	        .white{
	            width: 1.58rem;
	            height: 0.6rem;
	            margin: 0.36rem auto 0;
	            border-radius: 0.1rem;
	            font-size: 0.28rem;
	            line-height: 0.6rem;
	            background-color: #ff5000;
	        }
	    }
	}
}
</style>